<template>
  <div class="home">
    <homeTitle />

    <div class="homebanner">
      <img src="@/assets/img/home/banner.webp" alt="" />
    </div>

    <homeSearch />
    <homeCategories />
    <homeSearchBar v-if="showHomeSearchBar" />
    <homeContent />
  </div>
</template>

<script setup>
import { computed, watch } from "vue"

import homeTitle from "./cpns/home-title.vue"
import homeSearch from "./cpns/home-search.vue"
import homeCategories from "./cpns/home-categories.vue"
import homeContent from "./cpns/home-content.vue"
import homeSearchBar from "@/components/home-search-bar/home-search-bar.vue"
import { useHomeData } from "@/stores/modules/home"
import { useScroll } from "@/hooks/useScroll"

const scrollData = useScroll()
const { isReachBottom, scrollTop } = scrollData
// 窗口滚动加载数据
const homeData = useHomeData()

watch(isReachBottom, (newValue) => {
  if (newValue) {
    homeData.fetchHouseListData().then(() => {
      isReachBottom.value = false
    })
  }
})

const showHomeSearchBar = computed(() => {
  return scrollTop.value > 400
})
</script>

<style lang="less" scoped>
.home {
  padding-bottom: 50px;
  overflow-y: visible;
}
.homebanner {
  img {
    width: 100%;
  }
}
</style>
